import React, {useState,} from 'react'
import {connect} from 'react-redux'

// 重定向
import {Redirect, withRouter} from "react-router-dom"

// antd
import {Toast, WingBlank,} from "antd-mobile"

// layouts
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout"

// sharedComponents
import CustomButton from "../../shared-components/CustomButton/CustomBotton"
import FormTitle from "../../shared-components/FormTitle/FormTitle"
import FormInput from "../../shared-components/FormInput/FormInput"
import FormPwdInput from "../../shared-components/FormPwdInput/FormPwdInput"
import FormCodeInput from "../../shared-components/FormCodeInput/FormCodeInput"

// stylesheet
import './register.css'

// utils
// import {log,} from "../../utils/commonfunc"

// constants
import constants from "../../utils/constants"
import {nations} from "../../utils/mockdata";
import {getYZMReq} from "../../apis/goApis";

const RegisterContainer = withRouter((props) => {

    // states
    const [nation, setNation] = useState('中国')
    const [un, setUn] = useState('')
    const [mobile, setMobile] = useState('')
    const [pwd, setPwd] = useState('')
    const [pwdA, setPwdA] = useState('')
    const [code, setCode] = useState('')
    const [yqcode, setYqcode] = useState('')
    const [codeBtnActive, setCodeBtnActive] = useState(false)
    const [codeSend, setCodeSend] = useState(false)

    // props
    const {
        isLogin,
        emitError,
        history,
        location: {from,},
    } = props

    const [checked, setChecked] = useState(false)

    // 已登录 跳转
    if (isLogin) {
        if (from) {
            return <Redirect to={from}/>
            // return <Redirect to='/my'/>
        }
        return <Redirect to="/"/>
        // return <Redirect to="/"/>
    }

    const onChange = (e, type) => {
        const v = e.target.value
        const o = {
            un: setUn,
            mobile: setMobile,
            pwd: setPwd,
            pwdA: setPwdA,
            code: setCode,
            yqcode: setYqcode,
        }

        if (type === 'mobile') {
            if (v) {
                setCodeBtnActive(true)
            } else {
                setCodeBtnActive(false)
            }
        }
        o[type](v)
    }

    const getCode = () => {
        getYZMReq({mobile, style: 1,}).then((res) => {
            if (res.data.ok === 1) {
                Toast.info('已发送')
                setCodeSend(true)
                setCodeBtnActive(false)
            }
        })
    }

    // 表单验证函数
    const checkBeforeSubmit = ({un, mobile, pwd, pwdA, code,}) => {
        // 检查 用户名 和 密码
        if (mobile.length <= 0) {
            emitError('手机号码不能为空')
            return false
        }
        if (pwd.length <= 0) {
            emitError('密码不能为空')
            return false
        }
        // 检查手机位数
        // if (mobile.length !== 11) {
        //     emitError('手机号码必须为 11 位数')
        //     return false
        // }
        // 检查手机号码个视
        // if (!(/^1[3456789]\d{9}$/.test(mobile))) {
        //     emitError('手机号码格式有误')
        //     return false
        // }
        // 检查密码位数
        if (pwd.length < 6) {
            emitError('密码最少 6 位')
            return false
        }
        // 检查密码与验证密码
        if (pwd !== pwdA) {
            emitError('注册密码与验证密码不一致')
            return false
        }
        // 检查验证码
        if (code.length <= 0) {
            emitError('验证码不能为空')
            return false
        }
        // 检查是否打勾
        // if (!checked) {
        //     emitError('请阅读并接受《用户协议》')
        //     return false
        // }
        // 通过验证
        return true
    }

    const onSubmit = (e) => {

        e.preventDefault()

        const formData = {
            un,
            mobile,
            pwd,
            pwdA,
            code,
            yqcode,
        }


        if (checkBeforeSubmit(formData)) {
            props.doRegGo({
                un,
                pwd,
                mobile,
                yzcode: code,
                yqcode,
                usrc: 3001,
            }).then(succ => {
                if (succ) {
                    history.goBack()
                }
            })

        }
    }

    const onNationPick = e => {
        const v = e[0]
        const label = nations[nations.findIndex(data => data.value === v)].label
        setNation(label)
    }

    const form = (
        <WingBlank>
            {/*<div className='reg-nation-picker-ctn'>*/}
            {/*    <Picker*/}
            {/*        extra=' '*/}
            {/*        data={nations}*/}
            {/*        title="国家"*/}
            {/*        onOk={e => onNationPick(e)}*/}
            {/*    >*/}
            {/*        <List.Item arrow="down">{nation}</List.Item>*/}
            {/*    </Picker>*/}
            {/*</div>*/}

            {/*<FormInput*/}
            {/*    type='text'*/}
            {/*    value={un}*/}
            {/*    onChange={e => onChange(e, 'un')}*/}
            {/*    placeholder='请填写用户名'*/}
            {/*/>*/}
            <FormInput
                type='text'
                value={mobile}
                onChange={e => onChange(e, 'mobile')}
                placeholder='请填写手机号'
            />
            <FormPwdInput
                value={pwd}
                onChange={(e) => onChange(e, 'pwd')}
                placeholder='请设置密码(至少6位数字或英文字母)'
            />
            <FormPwdInput
                value={pwdA}
                onChange={(e) => onChange(e, 'pwdA')}
                placeholder='请再次输入密码'
            />
            <FormCodeInput
                type='text'
                value={code}
                onChange={(e) => onChange(e, 'code')}
                placeholder='请输入验证码'
                codeBtnActive={codeBtnActive}
                setCodeBtnActive={setCodeBtnActive}
                onCodeBtnClick={getCode}
                codeSend={codeSend}
            />
            <FormInput
                type='text'
                value={yqcode}
                onChange={e => onChange(e, 'yqcode')}
                placeholder='邀请码（非必填）'
            />
            {/*<input*/}
            {/*    type="checkbox"*/}
            {/*    className="reg-checkbox"*/}
            {/*    onChange={() => setChecked(!checked)}*/}
            {/*/>我已看过并接受<a href="#">《用户协议》</a>*/}
        </WingBlank>
    )

    const btn = (
        <div style={{marginTop: '2rem',}}>
            <WingBlank>
                <div style={{marginTop: '1rem', marginBottom: '5rem'}}>
                    <CustomButton
                        onClick={e => onSubmit(e, 1)}
                        inline='true'
                        shadow='0px 6px 10px 0px rgba(33, 58, 75,0.4)'
                    >注 册</CustomButton>
                </div>
            </WingBlank>
        </div>
    )

    return (

        <div className='fixed-flex-form-container'>
            <GoBackLayout
                history={history}
                GoBackIconColor={`${constants.themeColor}`}
            >

                <FormTitle
                    title='注册'
                />
                {form}
                {btn}
            </GoBackLayout>
        </div>
    )
})

const mapState = state => ({
    isLogin: state.global.isLogin,
    user: state.global.user,
})

const mapDispatch = ({global: {doRegFake, globalError, doRegGo}}) => ({
    doRegGo: (payload) => doRegGo(payload),
    emitError: (err) => globalError(err),
})

export default connect(mapState, mapDispatch)(RegisterContainer)

